<template>
  <div id="" class="p10 bgWhite">
    <div class="actyHeader mb10">
      <img class="headimg" :src="imgUrlLink(acty.author.headPortrait)" alt="">
      <div>
        <h3>{{acty.author.nickName}}</h3>
        <span>{{reviewTime(acty.createTime)}}</span>
      </div>
    </div>
    <div class="">
      <p class="mb10">
        <span class="talkTip">#{{acty.classify.classifyName}}#</span>
        {{acty.content}}
      </p>
      <div class="circleImage">
        <img v-if="showImgList.length==1" :src="imgUrlLink(showImgList[0])" alt="" width="100%" height="120">
        <span v-else v-for="elem in showImgList" :key="elem.key">
          <img :src="imgUrlLink(elem)" alt="" width="100%" height="120">
        </span>
      </div>

      <div class="circlebtm">
        <span>
          <img src="@/assets/playcircleImage/address_blue_icon.png" alt="">
          {{acty.addr || "默认"}}
        </span>

        <div class="">
          <!-- 消息 -->
          <span @click="toMessage(acty.id)">
            <img src="@/assets/playcircleImage/news_blue_icon.png" alt=""> {{acty.commentCount}}
          </span>
            <!-- 点赞 -->
          <span @click="praise()">
              <img src="@/assets/playcircleImage/snap1.png" alt="" v-if="acty.isPraise">
              <img src="@/assets/playcircleImage/snap2.png" alt="" v-else> {{acty.praiseCount}}
          </span>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { dateChangeTime } from '@/utils/util.js';
import {circleArticlePraise} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  props: ['acty'],
  data: () => ({
    showImgList:[],
    xlyd_loginInfo:'',
  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 日期格式转换
    reviewTime(time) {
      return dateChangeTime(time);
    },
    // 跳转消息列表
    toMessage(id) {
      console.log(id);
      this.$router.push({path:'/playMessage',query:{articleId:id}});
    },
    // 点赞、取消点赞
    praise() {
      let self = this;
      let xlyd_loginInfo = this.xlyd_loginInfo;
      let praise = self.acty.isPraise;    //自己是否点赞
      let praiseCount = self.acty.praiseCount;   //点赞数量

      if(xlyd_loginInfo=='' || xlyd_loginInfo==undefined) {
        self.messageBox.confirm('您还未登录').then(action=>{
          self.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
      }else {   //已登录
        let praiseParam = {
          articleId:self.acty.id,
          token:self.xlyd_loginInfo.token
        }
        circleArticlePraise(praiseParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.acty.isPraise = !praise;
            if(res.data.result==0) {    //当前为取消点赞
              self.acty.praiseCount = praiseCount-1;
            }else {
              self.acty.praiseCount = praiseCount+1;
            }
          }
        })
      }
    }
  },
  mounted() {
    //do something after mounting vue instance
    console.log(this.acty.showImg);
    this.$nextTick(()=>{
      let showImg = this.acty.showImg.split(',');
      this.showImgList = showImg;
      console.log(showImg);
    })


    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.xlyd_loginInfo = xlyd_loginInfo;
  },
  updated() {
    //do something after updating vue instance
    console.log(this.acty.showImg);
  }
}
</script>
<style lang="scss" scoped>
.actyHeader{
  @include flex;
  .headimg{
    width: 50px; height: 50px;
    border-radius: 100%;
    margin-right: 10px;
  }
  span{
    color: $grayColor;
  }
}
.talkTip{
  color: $blueColor;
}
.circlebtm{
  @include flex;
  justify-content: space-between;
  color: $blueColor;
  margin-top: 10px;
  img{
    width: 15px;
  }
  span:last-child{
    img{
      vertical-align: bottom;
      margin-left: 10px;
    }
  }
}
.circleImage{
  @include flex;
  flex-wrap: wrap;
  span{
    width: 32%;
    margin-left: 1%;
    margin-bottom: 10px;
  }
}
</style>
